<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
  }
  .layout-logo{
    width: 200px;
    line-height: 40px;
    height: 40px;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
    font-weight: bold;
    text-align: center;
    color: beige;
    font-size: 20px;
    align-content: center;
  }
  .layout-nav{
    width: 590px;
    margin: 0 auto;
    margin-right: 20px; 
   
  }
  
    .layout-nav a{
        color: antiquewhite;
    }
    .row-a a{
        color: rgb(0, 20, 100);
    }

    .content-nav{
        width: 1000px;
        /* height: 2000px; */
        margin: 0 auto;
        /* border: 1px red solid; */
        
    }
    .content-nav-right{
        width: 100%;
        float: right;
        position: relative;
        margin-top: 20px;
    }


    .carousel-nav{
        width: 100%;
        margin-top: 10px;
        border-bottom: 1px solid lightsteelblue;
    }
    .cn-row{
        margin-top: 20px;
    }
  .layout-footer-center{
      border: 1px solid #d7dde4;
      background-color: #d7dde4;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
    
  }
  .fromAdd{
       margin-top: 20px;
  }
</style>

<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo">游戏资讯分享平台</div>
                    <div class="layout-nav">
                          <MenuItem name="1">
                            <a @click="Home('Home')">头条</a>
                        </MenuItem>
                        <MenuItem name="2">
                            <a @click="SportsCircle('sportsClick')" >资讯社区</a>
                        </MenuItem>
                        <MenuItem name="3">
                            <a @click="Team('Team')">游戏库</a>
                        </MenuItem>
                        <MenuItem name="4">
                            <a  @click="MyTieZi('MyTieZi')" >我的资讯</a>
                        </MenuItem>
                        <MenuItem name="5">
                            <a @click="TableMain('TableMain')">关于我</a>
                        </MenuItem>
                         <MenuItem name="6">
                            <a @click="adminOut('adminOut')" style="color:red">退出登录</a>
                        </MenuItem>
                    </div>
                </Menu>
            </Header>

            <content :style="{padding:'0 50px'}">
               <div class="content-nav">
                    <div class="content-nav-right">
                        <div class="nav-carousel">
                           <div class="carousel-title">
                               <h3>我的资讯</h3>
                           </div>

                            <div class="carousel-nav"  v-for="(item,index) in sportsList" :key="index">
                               <Row class="cn-row">
                                    <i-col span="18"><h2><a>{{item.sname}}</a></h2></i-col>
                                    <i-col span="6"><h3>{{item.sdate}}</h3></i-col>
                                </Row>
                                <p class="cn-row"><h3>{{item.scontext}}</h3></p>
                                <Row class="cn-row">
                                    <i-col span="1"><Icon type="ios-pricetags"></Icon></i-col>
                                   
                                    <i-col span="2">作者：{{item.persons.username}}</i-col> 
                                    <!-- <a style="float: right;font-size:15px;text-align: center;width:120px;"  @click="SportsUpdateZan(item.sid)">赞
                                        <Icon type="md-thumbs-up" />({{item.szan}})</a> -->
                                    <a style="float: right;font-size:15px;text-align: center;width:120px; color:red;"  type="error"
                                      @click="SportsDel(item.sid)">删除</a>
                                    <a style="float: right;font-size:15px;" @click="toolEventSlot(item.sid)">热门评论
                                        <Icon type="ios-arrow-down"></Icon>
                                    </a>
                                </Row>
                                 <div style="background:#eee;padding: 15px;margin-top: 5px;" v-show="cindex===item.sid&&showPrise" >
                                    <Form  ref="formInline" :model="formInline"  >
                                        <Row>
                                            <i-col span="22">
                                            <FormItem>
                                                <Input type="textarea" id="cContext" v-model="formInline.cContext"  :autosize="{minRows: 2,maxRows: 5}" placeholder="快来写两句话评论下吧！"></Input>
                                            </FormItem>
                                            </i-col>
                                             <i-col span="2">
                                            <FormItem>
                                                <Button type="primary" style=" margin-left:5px;height:50px;"  @click="handleSubmit(item.sid,'formInline')">发布评论</Button>
                                            </FormItem>
                                            </i-col>
                                        </Row>
                                    </Form>
                                    <Card :bordered="true" style="margin-top: 10px;"  v-for="(comm,index) in commentList" :key="index">
                                        <p slot="title">{{comm.persons.username}}
                                         <!-- <a style="float: right;font-size:15px;text-align: center;" @click="CommentUpdateZan(comm.cid)">点赞
                                            <Icon type="md-thumbs-up" />({{comm.czan}})</a> -->
                                        </p>
                                        <p>{{comm.ccontext}}</p>
                                        <p>评论时间：{{comm.cdate}}</p>
                                    </Card>
                                </div>
                            </div>

                            <div class="carousel-title" style="margin-top: 50px;">
                               <h3>我的评论</h3>
                           </div>
                            
                            <content :style="{padding:'0 50px'}">
                                <Card>
                                    <!-- <div style="min-height:200px;">
                                        <v-table
                                            is-horizontal-resize
                                            style="width:100%"
                                            :columns="columns"
                                            :table-data="sportscircleList"
                                            row-hover-color="#eee"
                                            row-click-color="#edf7ff"
                                        ></v-table>
                                    </div> -->
                                    <!-- <div style="min-height:200px;">
                                        <i-table 
                                        height="300" 
                                        :columns="columns1" 
                                        :data="sportscircleList"
                                        border :content="self"
                                        ></i-table>
                                    </div> -->

                                     <Table border :columns="columns2" :data="sportscircleList" height="300" >
                                        <template slot-scope="{ row }" slot="name">
                                            <strong>{{ row.name }}</strong>
                                        </template>
                                        <template slot-scope="{ row, index }" slot="action">
                                            <Button type="error" size="small" @click="remove(row.cid)">删除</Button>
                                        </template>
                                    </Table>

                               
                                </Card>
                            </content>
                            

                            <!-- <div class="fromAdd">
                                <div class="carousel-title" style="margin-bottom: 20px;">
                                    <h3>发表帖子</h3>
                                </div>
                                <Form :model="formSports" :label-width="80" style=" margin-left:-40px;" >
                                    <FormItem label="标题">
                                        <Input v-model="formSports.sName" placeholder="Enter something..."></Input>
                                    </FormItem>
                                    <FormItem label="内容">
                                        <Input v-model="formSports.sContext" type="textarea" :autosize="{minRows: 3,maxRows: 6}" placeholder="Enter something..."></Input>
                                    </FormItem>
                                    <FormItem>
                                        <Button type="primary"  @click="SportsAdd('formSports')">Submit</Button>
                                        <Button style="margin-left: 8px">Cancel</Button>
                                    </FormItem>
                                </Form>
                            </div> -->
                        </div>
                    </div>
               </div>
               
            </content>
            <Footer class="layout-footer-center">2019-2020 &copy; TalkingData</Footer>
        </Layout>
    </div>
</template>

<script>
import axios from 'axios'

    export default {
        inject:["reload"],
        data () {
            return {
                limitNum: 5,
                limitFrom: 0,
                showPrise:false,
                sportsList:[ ],
                commentList:[ ],
                cindex: -1,
                sportsNum:0,
                commentNum:0,
                formInline: {
                   cContext:""
                },
                // formSports: {
                //     sName:"",
                //     sContext:""
                // },
                sportscircleList: [ ],
                columns2: [
                    {key: 'cid', title: '序号',width: 80,align: 'center' },
                    {key: 'cdate', title: '日期',width: 180,align: 'center' },
                    {key: 'ccontext', title: '评论内容',align: 'center' },
                    {title: 'Action',slot: 'action', width: 150,align: 'center' }
                   
                ],
                userId:0
            }
        },
        methods: {
            //根据ID查询评论后展示
            toolEventSlot (sid) {
                 axios('http://localhost:8081/CommentFindAll?sId='+sid).then((res) =>{
                    this.commentList = res.data;
                    console.log(this.commentList);
                    this.showPrise = !this.showPrise;
                    this.cindex = sid;
                })
            },
            //点赞
            SportsUpdateZan (sid) {
                 axios('http://localhost:8081/SportsUpdateZan?sId='+sid).then((res) =>{
                    this.sportsNum = res.data;
                    if(this.sportsNum==1){
                        this.reload();
                        this.$Message.success('操作成功!');
                    }else{
                         this.$Message.success('操作失败!');
                    }
                  
                })
            },
            //评论点赞
            CommentUpdateZan(cid) {
                axios('http://localhost:8081/CommentUpdateZan?cId='+cid).then((res) =>{
                    this.commentNum = res.data;
                    if(this.commentNum==1){
                        this.$Message.success('操作成功!');
                        this.reload();
                    }else{
                         this.$Message.success('操作失败!');
                    }
                  
                })
            },
            //添加评论
            handleSubmit(sid) {
                console.log("sid:"+sid);
                console.log("this.formInline:"+this.formInline.cContext);
                this.userId = sessionStorage.getItem('userId');
                console.log(this.userId);
                axios('http://localhost:8081/CommentAdd?cSid='+sid+'&cContext='+this.formInline.cContext+"&sPid="+this.userId).then((res) =>{
                    this.commentNum = res.data;
                    if(this.commentNum==1){
                        this.reload();
                       this.$Message.success('操作成功!');
                    }else{
                         this.$Message.success('操作失败!');
                    }
                  
                })
            },
            //发表帖子
            // SportsAdd(){
                
            //     console.log("this.formSports.sName:"+this.formSports.sName);
            //     console.log("this.formSports.sContext:"+this.formSports.sContext);
            //     this.userId = sessionStorage.getItem('userId');
            //     console.log(this.userId);
            //     axios('http://localhost:8081/SportsAdd?sName='+this.formSports.sName+'&sContext='+this.formSports.sContext+"&sPid="+this.userId).then((res) =>{
            //         this.commentNum = res.data;
            //         if(this.commentNum==1){
            //         this.reload();
            //            this.$Message.success('操作成功!');
            //         }else{
            //              this.$Message.success('操作失败!');
            //         }
                  
            //     })
            // },
            //删除贴子
            SportsDel(sid){
                axios('http://localhost:8081/SportsDel?sId='+sid).then((res) =>{
                    this.sportsNum = res.data;
                    if(this.sportsNum==1){
                        this.reload();
                        this.$Message.success('删除成功!');
                    }else{
                        this.$Message.success('删除失败!');
                    }
                  
                })
            },
            SportsCircle(){
                this.$router.push({
                path: `/SportsCircle/` })
            },
            MyTieZi(){
                this.$router.push({
                path: `/MyTieZi/` })
            },
            Team(){
                this.$router.push({
                path: `/Team/` })
            },
            TableMain(){
                this.$router.push({
                path: `/TableMain/` })
            },
            adminOut(){
                sessionStorage.clear();
                this.$router.push({
                path: `/` })
            },
            Home(){
                sessionStorage.clear();
                this.$router.push({
                path: `/Home` })
            },
            //删除评论
            remove (cid) {
                console.log(cid);
                axios('http://localhost:8081/CommentDel?cId='+cid).then((res) =>{
                this.commentNum = res.data;
                    if(this.commentNum==1){
                        this.reload();
                        this.$Message.success('操作成功!');
                    }else{
                        this.$Message.success('操作失败!');
                    }
                })
            }

        },
        //展示用户发表的帖子
        created(){  
            this.userId = sessionStorage.getItem('userId');
            console.log(this.userId);
            this.$ajax('http://localhost:8081/pIdSportfindAll?pId='+this.userId).then(res=>{
                this.sportsList = res.data
                console.log(this.sportsList);
            }).catch(function (error){
                console.log(error);
            });
        }
        ,
        //根据用户编号查询评论
        mounted(){
            this.userId = sessionStorage.getItem('userId');
            console.log("CommentPidFindAll:"+this.userId)
            this.$ajax('http://localhost:8081/CommentPidFindAll?pId='+this.userId).then(res=>{
                this.sportscircleList = res.data;
                console.log(this.sportscircleList);
            }).catch(function (error){
                console.log(error);
            });
        }
        
    }
</script>